<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.login {
		width: 100%;
		background-color: #F6F6F6;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: relative;
		flex:1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: url("../assets/img/bg4login.svg") no-repeat;
		/* 背景图垂直、水平均居中 */
		background-position: center center;
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-attachment: fixed;  //此条属性必须设置否则可能无效/
		/* 让背景图基于容器大小伸缩 */
	    background-size: 160% 160%;
	    /* 设置背景颜色，背景图加载过程中会显示背景色 */
		
		.wp{
			width: 100%;
			z-index: 99;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				color:$mainColor;
				text-align: center;
				font-size: 2rem;
			}
			.line{
				background-color: white;
				width: 80%;
				padding: 0 2rem;
				height: 5.8rem;
				line-height: 5.8rem;
				display: flex;
				align-items: center;
				border-radius: 2.9rem;
				margin-top: 2.8rem;
				box-sizing: border-box;
				overflow: hidden;
				input{
					border: none;
					height: 5rem;
					font-size: 1.6rem;
					padding-left: 0.4rem;
				}
			}
			.submit{
				background-color: white;
				width: 80%;
				margin-top: 2.8rem;
				box-sizing: border-box;
				overflow: hidden;
				text-align: center;
				font-size: 1.5rem;
			}
		}
	}
</style>
<template>
  <div class="login">
    <!-- <div class="wp">
		<div class="title">电大社区教育（管理端）</div>
		<div class="line">
			<img src="../assets/img/user.svg" alt="">
			<input type="text" v-model="form.username" placeholder="请输入账号" maxlength="11">
		</div>
		<div class="line">
			<img src="../assets/img/password.svg" alt="">
			<input type="text" v-model="form.password" placeholder="请输入密码" maxlength="20">
		</div>
		<van-button round class="submit" :color="$store.state.masterColor" size="normal" block :loading="loading" @click="login">登 录</van-button>
	</div> -->
  </div>
</template>

<script>
// @ is an alias to /src
import {Dialog,Loading} from 'vant'
export default {
  name: 'Login',
  components: {
    [Dialog.name]:Dialog,
	[Loading.name]:Loading
  },
  data() {
	  return {
		  form:{
			  username:'admin',
			  password:'123456'
		  },
		  loading: false
	  }
  },
  created() {
  	// this.getWeixinConfig()
  },
  mounted() {
  	
  },
  methods:{
	  login() {
		// this.form.avatar = this.$store.state.userInfo.avatar
		// this.form.nickname = this.$store.state.userInfo.nickname
	  	let params = {
			// avatar: this.form.avatar,
			// nickname: this.form.nickname,
	  		username: this.form.username,
	  		password: this.form.password
	  	}
		this.loading = true
	  	this.$request.login(params).then(res=>{
			if(res.ret==200){
				this.$cookies.remove('token');
				this.$cookies.set('token',res.data.token,3*24*60*60);
				localStorage.setItem('campus_id',res.data.campus_id)
				localStorage.setItem('user_type',res.data.user_type)
				localStorage.setItem('userInfo',JSON.stringify(res.data['0']))
				this.$router.push('/home')
			}
	  	}).catch(res=>{
			Dialog({ message: res.msg });
		}).finally(res=>{
			this.loading = false
		})
	  },
	  getWeixinConfig() {
	    const _this = this;
	    let params = {}
	    _this.$request.getWeixinConfig(params).then(res=>{
	      _this.$store.commit('setAppid', res.data.value.appid)
	      _this.$store.commit('setSecret', res.data.value.secret)
	      _this.$store.commit('setMininum', res.data.value.minimum)
	      localStorage.setItem("MININUM", res.data.value.minimum)
	      //_this.getCode(res.data.value.appid)
	      if (process.env.NODE_ENV == 'production') {
	        _this.getCode(res.data.value.appid)
	      }
	    })
	  },
	  getCode (appid) { // 非静默授权，第一次有弹框
	    const _this = this;
	    const code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
	    const local = window.location.href
	    if (code == null || code === '') {
	      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ appid +'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
	    } else {
	      _this.$store.commit('setCode', code)
	      _this.getOpenId(code) //把code传给后台获取用户信息
	    }
	  },
	  getUrlParam(name) {
	    var reg=new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
	    var r=window.location.search.substr(1).match(reg)
	    if(r!=null) return unescape(r[2])
	    return null
	  },
	  getOpenId(code) {
	    const _this = this;
	    let params = {
	        appid: _this.$store.state.appid,
	        secret: _this.$store.state.secret,
	        code: code
	    }
	    _this.$request.getOpenid(params).then(res=>{
	        const userInfo = res.data[0];
	        const openid = userInfo["openid"];
	        const access_token = userInfo["access_token"];
	        const nickname = userInfo["nickname"];
	        const headimgurl = userInfo["headimgurl"];
	        // const province = userInfo["province"]
	        // const city = userInfo["city"]
	        // const headimgurl = userInfo["headimgurl"];
	        // const headimgurl = userInfo["headimgurl"];
	        // const unionid = res.data.unionid;
	        _this.$store.commit('setOpenid', openid)
	        localStorage.setItem('OPENID', openid)
	        const item = {
	          openid,
	          nickname,
	          avatar:headimgurl,
	          // province,
	          // city,
	          // name:nickname
	        }
	        _this.$store.commit('setUserInfo',item)
	    })
	  },
  }
}
</script>
